<template>
  <div class="zhiboxitong">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right" style="position: relative;">
        <!-- <div style="background: #FFDA67; color: #FF1818; padding: 10px 20px; font-size: 14px; margin-bottom: 20px; position: absolute; left: 0; top: 0; width: 100%;">

        </div>-->

        <div class="tabs_container">
          <div  class="tabs_line_son t_tab_title_lei" @click="$router.push('/zhiboxitong/zhiboxiaoshou')">商城页管理
             <div class="t_under_line_lei"></div>
          </div>
          <div  class="tabs_line_son" @click="$router.push('/zhiboxitong/zhiboxiaoshou2')">商品管理
            <div class="t_under_line_lei2"></div>
          </div>
        </div>

        <div class="zhiboxitong_right">
          <div class="top_style">
            <div style="width:100%;padding-right:20px">
              <div
                style="background: rgb(255, 232, 236);padding: 15px 20px; font-size: 14px; margin-bottom: 20px;height:60px;border-radius:10px;"
              >
                <div style="margin-top:5px;display:flex">
                  <img src="../../static/img/jinggao.png" class="jinggao_image" alt />
                  商城页为多商品罗列在一个页面中，支持分类展示，可用于直播挂载、信息流推广等，如需支付请填写收款配置
                </div>
              </div>
            </div>
            <div style="width:100%;">
              <div class="search_container">
                <div style="margin-left:20px;">
                  <div style="margin:12px 0 8px 28px;font-size:14px">页面名称</div>
                  <el-input
                    placeholder="请输入页面名称"
                    style="margin-left:20px;width:240px;"
                    v-model="all.title"
                  ></el-input>
                </div>
                <div>
                  <div style="margin:12px 0 8px 28px;font-size:14px">发布人</div>
                  <el-input
                    placeholder="请输入发布人"
                    style="margin-left:20px;width:240px;"
                    v-model="all.user_name"
                  ></el-input>
                </div>
                <div>
                  <el-button icon="el-icon-search" class="btn_search" round @click="searchClick">检索</el-button>
                </div>
              </div>
            </div>
            <div class="flexb">
              <div class="flex flex_style">
                <div style="flex_style_son">
                  <div style="font-size:20px; font-weight: bold;margin-left:20px;">
                    商城页
                    <span
                      style=" font-size: 14px; cursor: pointer; color: #409EFF;margin-left:20px;"
                      @click="logz = true"
                    >直播投放流程</span>
                  </div>
                </div>
                <div>
                  <el-button
                    size="medium"
                    @click="log = true"
                    style="border-radius: 10px;height:40px"
                  >根据已有商城页快速创建</el-button>
                  <el-button
                    style="border-radius: 10px;height:40px;background:#F72C50"
                    size="danger"
                    @click="addFunction()"
                  >发布直播销售页</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="zhiboxitong_table">
            <el-table
              :data="list"
              style="width: 100%"
              :header-cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD' }"
              :cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD' }"
            >
              <el-table-column prop="title" label="页面名称" width="200px">
                <template slot-scope="scope">
                  <div style="display:flex">
                    <span>{{scope.row.title}}</span>
                    <img
                      src="../../static/img/edit.png"
                      style="width:15px;height:15px;cursor:pointer;margin-left:5px;margin-top:4px"
                      @click="edite(scope.row)"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="store_source" label="订单来源" width="200px">
                <template slot-scope="scope">
                  <div style="display:flex">
                    <span>{{scope.row.store_source}}</span>
                    <img
                      src="../../static/img/edit.png"
                      style="width:15px;height:15px;cursor:pointer;margin-left:5px;margin-top:4px"
                      @click="editeStore(scope.row)"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="user_name" label="发布人" align="left"></el-table-column>
              <el-table-column prop="created_at" label="创建时间" align="left" width="200px"></el-table-column>
              <!-- <el-table-column label="页面类型">下个版本</el-table-column>
              <el-table-column label="商家商品数"> 下个版本</el-table-column>-->
              <el-table-column prop="pv" label="PV" align="left"></el-table-column>
              <el-table-column prop="uv" label="UV" align="left"></el-table-column>
              <el-table-column prop="saled" label="今日销售" align="left"></el-table-column>
              <el-table-column scoped-slot align="left" width="240px">
                <!-- 在售商品中已下架的商品不会显示在用户端的销售页中 -->
                <template slot="header">
                  <div>
                    <div class="flexcc">
                      自动过滤已下架商品
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="在售商品中已下架的商品不会显示在用户端的销售页中"
                        placement="top-start"
                      >
                        <i
                          class="el-icon-question"
                          style="color: #ccc; font-size: 25px; margin-left: 5px; cursor: pointer;"
                        ></i>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.show_down_page"
                    active-color="#2974FF"
                    inactive-color="rgb(220, 220, 220)"
                    :active-value="0"
                    :inactive-value="1"
                    @change="xianshi(scope.row)"
                  ></el-switch>
                </template>
                <!-- <template slot-scope="scope">
                  <span v-if="scope.row.show_down_page == 1">显示中</span>
                  <span v-if="scope.row.show_down_page == 0">不显示</span>
                  <el-button size="mini" type="text" style="margin-left: 20px;" v-if="scope.row.show_down_page == 0" @click="xianshi(scope.row,1)">显示</el-button>
                  <el-button size="mini" type="text" style="margin-left: 20px;" v-if="scope.row.show_down_page == 1" @click="xianshi(scope.row,0)">不显示</el-button>
                </template>-->
              </el-table-column>
              <el-table-column label="销售页链接" width="200px" align="left">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="fuzhi(scope.row.id)"
                    style="color:#005AFF;font-size:14px"
                  >复制链接</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="creatQrCode(scope.row.id)"
                    style="color:#005AFF;font-size:14px"
                  >生成二维码</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="300px" align="left">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpin',scope.row.id)"
                    style="color:#005AFF;font-size:14px"
                  >管理商品</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu',scope.row.id)"
                    style="color:#005AFF;font-size:14px"
                  >编辑页面</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="jumpManage(scope.row.id)"
                    style="color:#FA8B14;font-size:14px"
                  >推广管理</el-button>
                  <!-- <el-button
                    size="mini"
                    type="text"
                    @click="shanchu(scope.row.id)"
                    style="color:#005AFF;font-size:14px"
                  >删除</el-button> -->
                  <el-dropdown @command="handleCommand">
                    <span
                      class="el-dropdown-link"
                      style="color:#005AFF;font-size:14px;cursor:pointer;margin-left:10px"
                    >更多</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="{ id: scope.row.id, action: 'delete' }">删除</el-dropdown-item>
                      <el-dropdown-item :command="{ id: scope.row.id, action: 'edit' }">从其他页面同步商品</el-dropdown-item>
                      <el-dropdown-item :command="{ item:scope.row, action: 'clear' }">清空商品</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <!-- <el-button
                    type="text"
                    size="mini"
                    @click="qingkong(scope.row)"
                    style="color:#005AFF;font-size:14px"
                  >清空商品</el-button> -->
                  <!-- <el-button
                    type="text"
                    size="mini"
                    @click="fuzhishangpin(scope.row.id)"
                    style="color:#005AFF;font-size:14px"
                  >从其他页面同步商品</el-button> -->
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;background:rgba(246,247,252,0.9)">
              <!-- <el-pagination background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"
              :total="total"></el-pagination>-->
              <el-pagination
                background
                layout="total,prev, pager, next"
                :page-size="all.page_size"
                @current-change="fanye"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="根据已有直播页发布页面"
      :visible.sync="log"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="flexc" style="margin-bottom: 20px;">
        <div class="z">标题：</div>
        <div class="r">
          <el-input
            v-model="tongbuall.title"
            maxlength="100"
            placeholder="请输入标题"
            style="width:209px"
          ></el-input>
        </div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div class="z">直播页：</div>
        <div class="r">
          <el-select v-model="tongbuall.id" placeholder="选择已有的直播页">
            <el-option v-for="item in list2" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style="border-radius: 10px;">取消</el-button>
        <el-button
          type="primary"
          @click="tongbugo"
          :disabled="tongbugoing"
          style="background:#3158F1;border-radius: 10px;"
        >确认</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="推广二维码"
      :visible.sync="erweima_log"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto;width:200px"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="erweima_log = false" style="border-radius: 10px;">关闭</el-button>
        <el-button type="primary" @click="xiazai" style="background:#3158F1;border-radius: 10px;">下载</el-button>
      </span>
    </el-dialog>
    <el-dialog title="直播投放流程" :visible.sync="logz" width="600px">
      <div class="tflc_images">
        <img src="../../static/img/tfliuchengtu.png" style="max-width: 100%;" />
      </div>
    </el-dialog>
    <el-dialog title="选择要同步的页面" :visible.sync="log2" :close-on-click-modal="false" width="500px">
      <div class="flex tbym_box">
        <div style="margin-left:40px">选择要同步的页面:</div>
        <el-select v-model="fuzhiall.old_id" placeholder="请选择" style="margin-left:30px">
          <el-option v-for="item in tableData2" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </div>
      <div style="margin-left: 40px;margin-top: 20px; color: red">注：同步后本商品页的商品将被追加</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log2 = false" style="border-radius: 10px;">取消</el-button>
        <el-button
          type="primary"
          @click="tongbugo2"
          :disabled="tongbugoing2"
          style="background:#3158F1;border-radius: 10px;"
        >确认同步</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="发布直播销售页"
      :visible.sync="addModal"
      width="500px"
      :showClose="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="页面名称:" prop="title">
          <el-input v-model="form.title" placeholder="请输入页面名称" style="width:209px;margin-left:20px"></el-input>
        </el-form-item>
        <el-form-item label="订单来源:" prop="store_source">
          <el-input
            v-model="form.store_source"
            placeholder="请输入敢探号的订单来源"
            style="width:209px;margin-left:20px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFun" style="border-radius: 10px;">取消</el-button>
        <el-button type="primary" @click="onOk" style="background:#3158F1;border-radius: 10px;">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :rules="rules" title="编辑页面名称" :visible.sync="titleEditAlart" width="30%">
      <el-form :model="formParams" label-width="120px">
        <el-form-item label="页面名称:" prop="title">
          <el-input
            v-model="formParams.title"
            placeholder="请输入页面名称"
            style="width:209px;margin-left:20px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="titleEditAlart = false" style="border-radius:8px">取 消</el-button>
        <el-button
          type="primary"
          @click="inStoreTitleClick"
          style="background:#005aff;border-radius:8px"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :rules="rules" title="编辑订单来源" :visible.sync="sourAlart" width="30%">
      <el-form :model="formParams" label-width="120px">
        <el-form-item label="订单来源:" prop="store_source">
          <el-input
            v-model="formParams.store_source"
            placeholder="请输入敢探号的订单来源"
            style="width:209px;margin-left:20px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sourAlart = false" style="border-radius:8px">取 消</el-button>
        <el-button
          type="primary"
          @click="inStorescoureClick"
          style="background:#005aff;border-radius:8px"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import axios from "axios";
import top from "./components/top.vue";
import left from "./components/left.vue";
export default {
  components: {
    top,
    left
  },
  name: "zhiboxitong",
  data() {
    return {
      sourAlart: false,
      titleEditAlart: false,
      addModal: false,
      rules: {
        title: [{ required: true, message: "请输入页面名称", trigger: "blur" }],
        store_source: [
          { required: true, message: "请输入敢探号的订单来源", trigger: "blur" }
        ]
      },
      formParams: {
        title: "",
        store_source: ""
      },
      form: {},
      tongbugoing: false,
      list: [],
      list2: [],
      tongbuall: {
        id: "",
        store_source: "",
        title: ""
      },
      log: false,
      logz: false,
      erweima_log: false,
      all: {
        title: "",
        user_name: "",
        page: 1,
        page_size: 10
      },
      fuzhiall: {
        id: "",
        old_id: ""
      },
      log2: false,
      tableData2: [],
      tongbugoing2: false
    };
  },
  beforeCreate() {},
  created() {
    if (this.$route.query.cookie) {
      let obj = new FormData();
      obj.append("laravel_session", this.$route.query.cookie);
      obj.append("domain", "91haoka.cn");
      // document.cookie="laravel_session="+this.$route.query.cookie;

      axios.post(`${this.apis}/api/auth/login2`, obj).then(response => {
        console.log("登录2");
        console.log(response);
        localStorage.setItem("sc_shopid", response.data.data.id);
        location.href =
          "http://storep.91haoka.cn/web/zhiboxitong/zhiboxiaoshou";
      });
    } else {
      this.getlist();
      this.getlist2();
    }

    axios.get(`${this.apis}/api/account/shop/info`).then(response => {
      if (response.data.msg.code == 0) {
        localStorage.setItem("sc_shopid", response.data.data.shop_id);
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
  },
  mounted() {},
  methods: {
    handleCommand(command) {
      if (command.action === "delete") {
        this.shanchu(command.id);
      } else if (command.action === "edit") {
        this.fuzhishangpin(command.id)
      }else if(command.action === "clear"){
        this.qingkong(command.item)
      }
    },
    jumpManage(id) {
      this.$router.push({
        path: "/zhiboxitong/plugManage",
        query: {
          id: id
        }
      });
    },
    edite: function(row) {
      this.titleEditAlart = true;
      Object.assign(this.formParams, row);
    },
    editeStore: function(row) {
      // this.formParams = row
      Object.assign(this.formParams, row);
      this.sourAlart = true;
    },
    inStoreTitleClick: function() {
      axios
        .post(`${this.apis}/api/store/make`, this.formParams)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("保存成功");
            this.titleEditAlart = false;
            this.getlist();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    inStorescoureClick: function() {
      axios
        .post(`${this.apis}/api/store/make`, this.formParams)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("保存成功");
            this.sourAlart = false;
            this.getlist();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    searchClick: function() {
      this.getlist();
    },
    onOk: function() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          let all = {
            title: "", //	wq店铺	是	string	无
            mobile: "", //	18056565656	是	string	电话
            contact: "", //	18056565656	是	string	联系方式
            qrcode: "", //	二维码	是	string	二维码
            order_info: "下单成功", //	下单返回话术	是	string	下单返回话术
            order_pic: "", //	3	是	string	下单返回图片
            order_pic_info: "", //	desc	是	string	下单返回图片描述
            account_id: 0, //	0	是	string	无
            other_contact: "", //0	是	string	其他联系方式
            order_contact: "", //	是	string	下单后联系方式
            store_source: "", //来源
            ...this.form
          };
          axios.post(`${this.apis}/api/store/make`, all).then(response => {
            console.log("response.data", response.data);
            if (response.data.msg.code == 0) {
              // this.$message.success("发布成功");

              this.goid(
                "/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu",
                response.data.data.id
              );
              this.cancelFun();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelFun: function() {
      this.$refs["ruleForm"].resetFields();
      this.addModal = false;
    },
    addFunction: function() {
      this.addModal = true;
    },
    xianshi: function(item) {
      if (item.show_down_page == 0) {
        var name = "确定过滤敢探号下架的商品吗？";
      }
      if (item.show_down_page == 1) {
        var name = "确定不过滤敢探号下架的商品吗？";
      }
      this.$confirm(name, "提示", {
        customClass: "custom-confirm-class",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post(`${this.apis}/api/store/show/down`, {
              id: item.id,
              show_down_page: item.show_down_page
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist();
                this.$message.success("已修改成功");
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        })
        .catch(() => {
          this.getlist();
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },
    tongbugo: function() {
      if (!this.tongbuall.title) {
        this.$message.error("必填标题");
        return false;
      }
      this.tongbugoing = true;
      axios
        .post(`${this.apis}/api/store/copy`, this.tongbuall)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getlist();
            this.log = false;
            this.$message.success("复制成功");

            setTimeout(() => {
              this.tongbugoing = false;
            }, 500);
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    shanchu: function(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-confirm-class"
      }).then(() => {
        axios
          .post(`${this.apis}/api/store/delete`, { id: id })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.$message.success("已删除");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      });
    },
    creatQrCode(id) {
      this.erweima_log = true;
      this.$nextTick(() => {
        this.$refs.qrCodeUrl.innerHTML = "";
        let url = location.origin + "/h5/index.html?id=" + id;
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 400,
          height: 400,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    xiazai: function() {
      let img = document.getElementsByClassName("qrcode")[0].childNodes[1];
      var a = document.createElement("a");
      a.download = "erweima"; //这边是文件名，可以自定义
      a.href = img.src;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    fuzhi: function(id) {
      let url = location.origin + "/h5/index.html?id=" + id;
      this.copy(url);
    },
    fanye: function(val) {
      this.all.page = val;
      this.getlist();
    },
    //分页
    // handleSizeChange(val) {
    //   this.all.page_size = val;
    //   this.getlist();
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   this.all.page = val;
    //   this.getlist();
    //   console.log(`当前页: ${val}`);
    // },
    getlist: function() {
      axios
        .get(`${this.apis}/api/store/list`, { params: this.all })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data;
            this.total = response.data.data.total;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });

      axios
        .get(`${this.apis}/api/store/list?page=1&page_size=1000`)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.tableData2 = response.data.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    getlist2: function() {
      axios
        .get(`${this.apis}/api/store/list?page=1&page_size=300`)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list2 = response.data.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    qingkong: function(item) {
      this.$confirm("确定要清空吗", "提示", {
        customClass: "custom-confirm-class",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios
          .post(`${this.apis}/api/tab/pages/delete`, { tab: item.id })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.$message.success("已清空");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      });
    },
    fuzhishangpin: function(id) {
      this.log2 = true;
      this.fuzhiall.id = id;
    },
    tongbugo2: function() {
      this.tongbugoing2 = true;
      axios
        .post(`${this.apis}/api/store/pages/copy`, this.fuzhiall)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("复制成功");
            this.log2 = false;
            setTimeout(() => {
              this.tongbugoing2 = false;
            }, 500);
          } else {
            this.$message.error(response.data.msg.info);
            this.tongbugoing2 = false;
          }
        });
    }
  }
};
</script>
<style>
/* 修改mssageBox样式 */
.custom-confirm-class .el-message-box__title {
  font-size: 20px;
  font-weight: bold;
}
</style>
<style scoped lang="less">
/deep/ .el-pagination {
  margin-right: 30px;
}
/deep/ .el-table {
  background-color: #f8f9fd;
}
// 给header左上角设置圆角
/deep/ .el-table__header tr {
  // &:first-child{
  //  }
  //  height: 72px;
}
// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover td {
  background-color: white !important;
}

/deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
  padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
/deep/ .el-table__body td {
  height: 72px;
}
.jinggao_image {
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
.tbym_box {
  display: flex;
  align-items: center;
}
.tflc_images {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_style {
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}

//去掉每行的下边框
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

// 去掉表格单元格边框
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
// 表格最外边框
.el-table--border,
.el-table--group {
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf {
  border: 1px solid #ebeef5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid #ebeef5;
}
// 表格最外层边框-底部边框
.el-table--border::after,
.el-table--group::after {
  width: 0;
}
.customer-table::before {
  width: 0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
// 表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
  border: 1px solid #ebeef5;
  border-left: none;
}
// 去除边框线
/deep/ .el-table::before {
  height: 0;
}
.search_container {
  width: 100%;
  display: flex;
  height: 120px;
  background: #f8f9fd;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 20px 0 0 20px;
}
.flex_style {
  padding: 0 20px;
  box-sizing: border-box;
  margin: 20px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.zhiboxitong {
  // background: #f2f2f2;
  min-height: 100vh;
  * {
    box-sizing: border-box;
  }
  .zhiboxitong_content {
    height: calc(100vh - 70px);
    .left {
      width: 210px;
      background: #fafafe;
      height: 100%;
    }
    .right {
      width: calc(100vw - 220px);
      padding-left: 20px;
      height: 100vh;
      overflow: auto;
      .zhiboxitong_right {
        height: calc(100vh - 90px);
        background: #fff;
      }

      .zhiboxitong_table {
        padding: 20px 30px 0 30px;
        box-sizing: border-box;
        background: #f8f9fd;
        border-top-left-radius: 30px;
      }
    }
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
  }

  .flexb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flexc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .flexbc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .flexcc {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: center;
  }
}
/deep/ .el-dialog {
  border-radius: 20px;
}

/deep/ .el-input__inner {
  border-radius: 12px;

  box-shadow: none !important;
}

/deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold; /* 修改标题字体大小 */
}
.left-align-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
}
.btn_search {
  background: #f72c50;
  border: 0;
  color: #fff;
  margin: 35px 0 0 30px;
}
/deep/ .el-pagination .el-pager li {
  border-radius: 12px; /* 设置圆角大小 */
  background: white;
}

.t_tab_title_lei {
  color: #005aff;
}
.tabs_line_son{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
// .t_tab_title_lei_no {
//   color: #999;
// }
.t_under_line_lei {
  width: 30px;
  height: 5px;
  background-color: #005aff;
  margin-top: 6px;
  border-radius: 10px;
}
.t_under_line_lei2 {
  width: 30px;
  height: 5px;
  background-color: #fff;
  margin-top: 6px;
  border-radius: 10px;
}
/deep/ .el-pagination .el-pager li {
  border-radius: 12px; /* 设置圆角大小 */
}
.tabs_container{
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  cursor: pointer;
  margin-left: 20px;
  width: 240px;
  justify-content: space-between;
}

</style>
